<div class="slide-in-content text-gray-700 dark:text-gray-200 text-lg w-full lg:w-4/5 xl:w-4/5 2xl:w-4/5 m-auto">

    <div class="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
        <div>
            <button onclick="start_led_animation('theaterchase', 'normal')" class="transform  hover:scale-105 transition
      duration-300 shadow-xl w-full h-20 bg-gray-200 dark:bg-gray-700 font-bold rounded-lg">
                Theater Chase
            </button>
        </div>
        <div>
            <button onclick="start_led_animation('theaterchaserainbow', 'normal')" class="transform  hover:scale-105 transition
      duration-300 shadow-xl w-full h-20 bg-gray-200 dark:bg-gray-700 font-bold rounded-lg">
                Theater Chase Rainbow
            </button>
        </div>
        <div>
            <button onclick="start_led_animation('fireplace', 'normal')" class="transform  hover:scale-105 transition
      duration-300 shadow-xl w-full h-20 bg-gray-200 dark:bg-gray-700 font-bold rounded-lg">
                Fireplace
            </button>
        </div>
        <div>
            <button onclick="start_led_animation('soundofdapolice', 'normal')" class="transform  hover:scale-105 transition
      duration-300 shadow-xl w-full h-20 bg-gray-200 dark:bg-gray-700 font-bold rounded-lg">
                Sound Of Da Police
            </button>
        </div>
        <div>
            <button onclick="start_led_animation('scanner', 'normal')" class="transform  hover:scale-105 transition
    duration-300 shadow-xl w-full h-20 bg-gray-200 dark:bg-gray-700 font-bold rounded-lg">
                Scanner
            </button>
        </div>
        <div>
            <button class="w-full h-8 bg-gray-200 dark:bg-gray-700 cursor-default font-bold m-0 rounded-t-lg">
                Breathing
            </button>
            <div class="h-12 text-sm whitespace-nowrap flex ">
                <button onclick="start_led_animation('breathing', 'slow')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900 m-0 rounded-bl-lg
        transform  hover:scale-105 transition duration-300 shadow-xl ">
                    Slow
                </button>
                <button onclick="start_led_animation('breathing', 'medium')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-none
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    Medium
                </button>
                <button onclick="start_led_animation('breathing', 'fast')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-br-lg
        transform  hover:scale-105 transition duration-600 shadow-xl">
                    Fast
                </button>
            </div>
        </div>

        <div>
            <button class="w-full h-8 bg-gray-200 dark:bg-gray-700 cursor-default font-bold m-0 rounded-t-lg">
                Rainbow
            </button>
            <div class="h-12 text-xs whitespace-nowrap flex ">
                <button onclick="start_led_animation('rainbow', 'slow')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900 m-0 rounded-bl-lg
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    Slow
                </button>
                <button onclick="start_led_animation('rainbow', 'medium')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-none
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    Medium
                </button>
                <button onclick="start_led_animation('rainbow', 'fast')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-br-lg
        transform  hover:scale-105 transition duration-600 shadow-xl">
                    Fast
                </button>
            </div>
        </div>

        <div>
            <button class="w-full h-8 bg-gray-200 dark:bg-gray-700 cursor-default font-bold m-0 rounded-t-lg">
                Rainbow Cycle
            </button>
            <div class="h-12 text-xs whitespace-nowrap flex ">
                <button onclick="start_led_animation('rainbowcycle', 'slow')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900 m-0 rounded-bl-lg
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    Slow
                </button>
                <button onclick="start_led_animation('rainbowcycle', 'medium')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-none
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    Medium
                </button>
                <button onclick="start_led_animation('rainbowcycle', 'fast')" class="w-2/6 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-br-lg
        transform  hover:scale-105 transition duration-600 shadow-xl">
                    Fast
                </button>
            </div>
        </div>

        <div>
            <button class="w-full h-8 bg-gray-200 dark:bg-gray-700 cursor-default font-bold m-0 rounded-t-lg">
                <div class="inline-flex">
                    <div>Chords</div>
                    <div class="has-tooltip">
                        <span class="inline-block tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-400 -mt-8">
                            Colors are taken from Scale color mode
                            <br>Brightness is taken from backlight settings
                        </span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </button>
            <div class="h-12 text-xs whitespace-nowrap flex ">
                <button class="w-1/2 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900 m-0 rounded-bl-lg
        transform  hover:scale-105 transition duration-300 shadow-xl">
                    <div class="relative w-full ">
                        <select id="chord" class="block m-auto appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 mb-2 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0">C</option>
                            <option value="1">C#</option>
                            <option value="2">D</option>
                            <option value="3">Eb</option>
                            <option value="4">E</option>
                            <option value="5">F</option>
                            <option value="6">F#</option>
                            <option value="7">G</option>
                            <option value="8">Ab</option>
                            <option value="9">A</option>
                            <option value="10">Bb</option>
                            <option value="11">B</option>
                            <option value="12">C m</option>
                            <option value="13">C# m</option>
                            <option value="14">D m</option>
                            <option value="15">Eb m</option>
                            <option value="16">E m</option>
                            <option value="17">F m</option>
                            <option value="18">F# m</option>
                            <option value="19">G m</option>
                            <option value="20">Ab m</option>
                            <option value="21">A m</option>
                            <option value="22">Bb m</option>
                            <option value="23">B m</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </button>
                <button onclick="start_led_animation('chords', document.getElementById('chord').value)" class="w-1/2 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-br-lg
        transform  hover:scale-105 transition duration-600 shadow-xl">
                    Start
                </button>
            </div>
        </div>

        <div>
            <button class="w-full h-8 bg-gray-200 dark:bg-gray-700 cursor-default font-bold m-0 rounded-t-lg">
                Colormap
            </button>

            <div class="h-12 text-xs whitespace-nowrap flex ">
                <button class="w-1/2 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900 m-0 rounded-bl-lg
            transform  hover:scale-105 transition duration-300 shadow-xl">
                    <div class="relative w-full ">
                        <select id="colormap_anim_id" class="block m-auto appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 mb-2 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="Rainbow">Rainbow</option>
                        </select>
                    </div>
                </button>
            
                <button onclick="start_led_animation('colormap_animation', document.getElementById('colormap_anim_id').value)" class="w-1/2 bg-gray-200 dark:bg-gray-700 font-bold border border-gray-100 dark:border-gray-900  m-0 rounded-br-lg
            transform  hover:scale-105 transition duration-600 shadow-xl">
                    Start
                </button>
            </div>
        </div>

        <div>
            <button onclick="start_led_animation('stop', 'normal')" class="h-12 transform  hover:scale-105 transition
      duration-300 shadow-xl w-full h-full bg-gray-200 dark:bg-gray-700 font-bold rounded-lg"
                    data-translate="stop_animation">
                Stop Animation
            </button>
        </div>

        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-2">
                <div class="font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="led_animation_on_idle">LED animation on IDLE</div>
                <div class="text-sm text-gray-600 dark:text-gray-400" data-translate="after_minutes">after minutes (0 - never)</div>
                <div class="flex mb-4">
                    <svg onclick="document.getElementById('animation_delay').stepDown();
                    document.getElementById('animation_delay').dispatchEvent(new Event('change'));
                    change_setting('animation_delay', document.getElementById('animation_delay').value);" xmlns="http://www.w3.org/2000/svg" class="m-auto w-full h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <input id="animation_delay" name="field_name" type="number" value="0" min="0" max="9999"
                           class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600 py-2 px-2 rounded-2xl
                           leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                    <svg onclick="document.getElementById('animation_delay').stepUp();
                        document.getElementById('animation_delay').dispatchEvent(new Event('change'));
                        change_setting('animation_delay', document.getElementById('animation_delay').value);" xmlns="http://www.w3.org/2000/svg" class="m-auto w-full h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="animation_type">Animation type</div>
                <div class="relative w-full">
                    <select onchange="change_setting('led_animation', document.getElementById('led_animation').value);"
                    id="led_animation" class="block m-auto appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 mb-2 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                        <option value="Rainbow Slow">Rainbow Slow</option>
                        <option value="Theater Chase">Theater Chase</option>
                        <option value="Breathing Slow">Breathing Slow</option>
                        <option value="Rainbow Cycle Slow">Rainbow Cycle Slow</option>
                        <option value="Theater Chase Rainbow">Theater Chase Rainbow</option>
                        <option value="Sound of da police">Sound of da police</option>
                        <option value="Scanner">Scanner</option>

                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </div>
                </div>

                <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="brightness">
                    Brightness
                </div>
                <div class="content-center flex-1">
                    <input onchange="change_setting('led_animation_brightness_percent', this.value);" id="brightness" class="w-full" type="range" value="50" min="1" max="100"
                           oninput="this.nextElementSibling.value = this.value+'%' ">
                    <output id="brightness_percent" class="flex justify-center">50%</output>
                </div>
        </div>
    </div>
</div>
